<template>
    
      <el-form :model="changeForm" status-icon  ref="changeForm"  label-width="150px" class="demo-ruleForm" style="margin-right:25px;">
        <el-form-item :label="_$Z['name']" prop="operatorName" :rules="filter_rules({required:true,length:[2,20]})">
            <el-input v-model="changeForm.operatorName"></el-input>
        </el-form-item>
        <el-form-item :label="_$Z['oldPassword']" prop="oldPass" :rules="filter_rules({required:true,length:[6,20]})">
            <el-input type="password" v-model="changeForm.oldPass" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item :label="_$Z['newPassword']" prop="newPass" :rules="filter_rules({required:true,length:[6,20]})">
            <el-input type="password" v-model="changeForm.newPass" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item :label="_$Z['confirmPassword']" prop="checkPass" :rules="filter_rules({required:true,length:[6,20]})">
            <el-input type="password" v-model="changeForm.checkPass" auto-complete="off"></el-input>
        </el-form-item>

        <!-- <el-row type="flex" class="row-bg" style="margin-bottom:10px;margin-left:90px;width:370px;">
          <el-col :span="6"><div id="block" v-bind:class="{ danger: dangerActive, caveat: caveatActive, safety: safetyActive }" ></div></el-col>
          <el-col :span="6"><div id="block" v-bind:class="{ caveat: caveatActive, safety: safetyActive }" ></div></el-col>
          <el-col :span="6"><div id="block" v-bind:class="{ safety: safetyActive }" ></div></el-col>
        </el-row> -->

        <el-form-item :label="_$Z['cellPhoneNumber']" prop="operatorPhone" :rules="filter_rules({phone:true})">
            <el-input type="operatorPhone" v-model="changeForm.operatorPhone" auto-complete="off"></el-input>
        </el-form-item> 
        <el-form-item :label="_$Z['telephoneNumber']" prop="operatorTele" :rules="filter_rules({phone:true})">
            <el-input type="operatorTele" v-model="changeForm.operatorTele" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item :label="_$Z['email']" prop="operatorEmail" :rules="filter_rules({email:true,length:[-1,64]})">
            <el-input type="operatorEmail" v-model="changeForm.operatorEmail"></el-input>
        </el-form-item>
        <div style="margin-left:25px;margin-top:30px;" align="center">
            <custom-btn btn-type="save" @btn-click="submitForm('changeForm')" :label="this._$Z['save']"></custom-btn>
            <custom-btn btn-type="" @btn-click="resetForm('changeForm')" :label="this._$Z['reset']"></custom-btn>
        </div>
      </el-form>
</template>

<style>
  .danger {
    background:#F56C6C;
  }
  .caveat {
    background:#E6A23C;
  }
  .safety{
    background:#67C23A;
  }
  #block {
    border:1px solid rgb(196, 190, 190);
    border-radius: 1px;
    min-height: 25px;
  }
</style>

<script>
import { post } from '@/api/common'

export default {
  data() {
    return {
      i18Keys: ['name',
        'oldPassword',
        'newPassword',
        'confirmPassword',
        'cellPhoneNumber',
        'telephoneNumber',
        'save',
        'reset',
        'email',
        'samePassword',
        'inconsistent',
        'oldPassError',
        'passSuccess'],
      changeForm: {
        operatorId: '',
        operatorName: '',
        oldPass: '',
        newPass: '',
        checkPass: '',
        operatorPhone: '',
        operatorTele: '',
        operatorEmail: ''
      },
      operatorInfo: {},
      dangerActive: false,
      caveatActive: false,
      safetyActive: false
    }
  },
  // watch: {
  //   'changeForm.newPass': function(val, oldVal) {
  //     this.safety(val)
  //   }

  // },
  mounted() {
    this.initInfo()
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.changeForm.checkPass !== this.changeForm.newPass) {
            this.$message.warning(this._$Z['inconsistent'])
            return
          }
          if (this.changeForm.oldPass === this.changeForm.newPass) {
            this.$message.warning(this._$Z['samePassword'])
            return
          }
          post('/common/operator/operatorUpdatePassword', this.changeForm).then(response => {
            this.$message({
              type: 'success',
              message: this._$Z['passSuccess']
            })
            this.$store.dispatch('FedLogOut').then(() => {
              location.reload()// 为了重新实例化vue-router对象 避免bug
              this.$router.push({ path: '/login' })
            })
          })
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
      this.dangerActive = false
      this.caveatActive = false
      this.safetyActive = false
    },
    initInfo() {
      post('/common/operator/operatorQueryInfo', {}).then(response => {
        this.operatorInfo = response.data.data
        this.initOperator()
        console.log(response)
      })
    },
    initOperator() {
      this.changeForm.operatorName = this.operatorInfo.operatorName
      this.changeForm.operatorPhone = this.operatorInfo.operatorPhone
      this.changeForm.operatorTele = this.operatorInfo.operatorTele
      this.changeForm.operatorEmail = this.operatorInfo.operatorEmail
    },
    safety(val) {
      let grade = 0
      const now = val
      var re = new RegExp('[a-zA-Z]')
      if (re.test(now)) {
        grade++
      }
      re = new RegExp('[0-9]')
      if (re.test(now)) {
        grade++
      }
      re = new RegExp('((?=[\x21-\x7e]+)[^A-Za-z0-9])')
      if (re.test(now)) {
        grade++
      }
      if (grade === 0) {
        this.dangerActive = false
        this.caveatActive = false
        this.safetyActive = false
        true
      } else if (grade === 1) {
        this.dangerActive = true
        this.caveatActive = false
        this.safetyActive = false
        return
      } else if (grade === 2) {
        this.dangerActive = false
        this.caveatActive = true
        this.safetyActive = false
        return
      } else if (grade === 3) {
        this.dangerActive = false
        this.caveatActive = false
        this.safetyActive = true
        return
      }
    }
  }
}
</script>